<template>
  <div class="bpmn-de">
    <el-button @click="dl">保存</el-button>
    <el-button @click="chakan">查看</el-button>
    <el-button @click="fuzhi">赋值</el-button>
    <form-create ref="test" v-model="test2" :rule="formTest.rule" :option="formTest.option"></form-create>
    <fc-designer ref="designer"></fc-designer>
  </div>
</template>

<script>
import BpmnDesigner from "@/components/BpmnProcessDesigner/packages/components/Designer";
import BpmnSettings from "@/components/BpmnProcessDesigner/packages/components/Settings";
import { mapGetters } from "vuex";
import BpmnToolbar from "@/components/BpmnProcessDesigner/packages/components/Toolbar";
import BpmnContextMenu from "@/components/BpmnProcessDesigner/packages/components/ContextMenu/ContextMenu";
import BpmnPanel from "@/components/BpmnProcessDesigner/packages/components/Panel";
import formCreate from "@form-create/element-ui";
export default {
  name: "App",
  components: { BpmnPanel, BpmnContextMenu, BpmnToolbar, BpmnSettings, BpmnDesigner },
  data() {
    return {
      xmlString: undefined,
      test2:null,
      formTest:{
        option: {},
        rule:[],
        value:null
      },
      conf:'{"form":{"labelPosition":"right","size":"mini","labelWidth":"125px","hideRequiredAsterisk":false,"showMessage":true,"inlineMessage":false},"submitBtn":true,"resetBtn":false}',
      fields:'[{"type":"input","field":"F6r260yj0q4dj","title":"输入框","info":"","$required":false,"_fc_drag_tag":"input","hidden":false,"display":true},{"type":"radio","field":"F2d560yj0qa5o","title":"单选框","info":"","effect":{"fetch":""},"$required":false,"options":[{"value":"1","label":"选项1"},{"value":"2","label":"选项2"}],"_fc_drag_tag":"radio","hidden":false,"display":true},{"type":"checkbox","field":"Fs5g60yj0qllp","title":"多选框","info":"","effect":{"fetch":""},"$required":false,"options":[{"value":"1","label":"选项1"},{"value":"2","label":"选项2"}],"_fc_drag_tag":"checkbox","hidden":false,"display":true}]'
    };
  },
  computed: {
    ...mapGetters(["getEditorConfig"])
  },
  mounted() {
    document.body.addEventListener("contextmenu", function (ev) {
      ev.preventDefault();
    });
  },
  methods:{
    dl(){
      console.log(this.$refs.designer.getOption())
      console.log(this.$refs.designer.getRule())
      console.log(formCreate.toJson(this.$refs.designer.getOption()))
      console.log(JSON.stringify(this.$refs.designer.getOption()))
      console.log(formCreate.toJson(this.$refs.designer.getRule()))
      this.formTest.rule = formCreate.parseJson(this.fields)
      this.formTest.option = JSON.parse(this.conf)
      // this.$refs.test.setOption(JSON.parse(this.conf))
      // this.$refs.test.setRule(formCreate.parseJson(this.fields))

    },
    chakan(){
      console.log(this.$refs.test)
      console.log(JSON.stringify(this.test2.form))
    },
    fuzhi(){
      // this.test2.form = JSON.parse('{"F6r260yj0q4dj":"5556666","F2d560yj0qa5o":"1","Fs5g60yj0qllp":["2"]}')
      this.test2.setValue(JSON.parse('{"F6r260yj0q4dj":"5556666","F2d560yj0qa5o":"1","Fs5g60yj0qllp":["2"]}'))
      this.formTest.option.submitBtn =false
    }
  }
};
</script>
<style scoped>
.bpmn-de {
  width: calc(100vw - 200px);
  height: calc(100vh - 84px);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  margin: 0;
  padding: 0;
  overflow: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
</style>
